<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
			#all {
				width: 600px;
				height: 600px;
			}
			
			.item {
				width: 100%;
				height: 100%;
			}
			
			.box {
				width: 200px;
				height: 200px;
				border: 1px solid #A9A9A9;
				float: left;
			}
			
			#all .item {
				background-image: url(img/pin1.jpg);
				background-size: 600px 600px;
			}
			
			#motai {
				width: 100%;
				height: 100%;
				position: fixed;
				top: 0;
				background-color: rgba(0, 0, 0, 0.7);
				display: none;
			}
			
			#main {
				width: 400px;
				height: 100px;
				margin: 0 auto;
				position: absolute;
				top: 45%;
				left: 40%;
				text-align: center;
				background-color: #F0F8FF;
			}
			
			#main p {
				margin: 20px auto;
			}
			
			#img {
				width: 200px;
				height: 200px;
				border: 1px solid #A9A9A9;
				position: absolute;
				top: 0;
				right: 30%;
			}
			
			img {
				width: 200px;
				height: 200px;
			}
			#jishi{
				width: 600px;
				height: 50px;
				border: 1px solid #5F9EA0;
				color: darkgoldenrod;
				line-height: 50px;
				text-align: center;
			}
			#jishi #s{
				color: brown;
				font-size: 30px;
			}
		</style>
	</head>

	<body>
		<div id="jishi">
			<p><span id="s">
			</span>秒后游戏开始</p>
		</div>
		<div id="all">
		</div>
		<div id="img">
			<h3>原图</h3>
			<img src="img/pin1.jpg" />
		</div>
		<div id="motai">
			<div id="main">
				<p></p>
				<input type="button" id="next" value="下一关" />
			</div>
		</div>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				var num = 3;
				var currentItem;
				inite();
				function inite() {
					var arr = [];
					var wh = 600 / num;
					for(var i = 0, k = 0; i < num; i++) {
						for(var j = 0; j < num; k++, j++) {
							var box = $('<div class="box" style="width: ' + wh + 'px;height: ' + wh + 'px;"><div id="item' + k + '" class="item" draggable="true" data-index=' + k + '></div></div>');
							box.children(".item").css("background-position", j * -wh + "px " + i * -wh + "px");
							arr.push(box);
						}
					}
					$("#all").append(arr);
					var s = 5;
					$("#s").html(s)
					var jishi=setInterval(function() {
						s--;
						$("#s").html(s)
						if(s == 0) {
						//打乱顺序
//						$("#jishi p").html("游戏开始!!").css("color","#FF7F50")
						var newarr = arr.sort(function(k, v) {
							return Math.random() > 0.5 ? 1 : -1
						})
						$("#all .box").remove()
						$("#all").append(newarr);
						clearInterval(jishi);
					}
					}, 1000)
				}
				$("#all").on("dragstart", ".item", function(event) {
					currentItem = event.currentTarget;
				})
				$("#all").on("dragover", ".box", function(event) {
					event.preventDefault();
					event.stopPropagation();
				})
				$("#all").on("drop", ".box", function(event) {
					event.preventDefault();
					event.stopPropagation();
					var currentbox = event.currentTarget;
					var boxitem = event.target;
					var drapparent = currentItem.parentNode;
					drapparent.appendChild(boxitem);
					currentbox.append(currentItem);
					win();
				})

				function win() {
					var wingg = true;
					$("#all .item").each(function(i, v) {
						if(v.id != "item" + i) {
							wingg = false;
							return;
						}
					});
					if(wingg) {
						$("#motai").fadeToggle(500)
						$("#main p").html("拼图成功");
					}
				}
				var a = 1;
				$("#next").on("click", function() {
					$("#motai").fadeToggle(500);
					num++;
					a++;
					inite();
					$(".item").css("background-image", "url(img/pin" + a + ".jpg)");
					$("#img img").attr({
						src: "img/pin" + a + ".jpg"
					})
				})

			})
		</script>
	</body>

</html>